{% extends 'base.html' %}

{% block title %}主页{% endblock %}


{% block content %}

<div class="container">
    <div class="row">
        <div class="col-md-8 bg-white p-4">
            {% for post in posts %}
            <div class="media">
                <!-- 标题图 -->
                {% if post.img %}
                <a href="{{ post.get_absolute_url }}">
                    <img src="{{ post.img.url }}" alt="标题图" class="rounded mr-4" width="150" height="150">
                </a>
                {% endif %}

                <div class="media-body">
                    <h4><a class="text-decoration-none text-weight-bold text-dark" href="{{ post.get_absolute_url }}">{{ post.title }}</a></h4>

                    <p class="text-secondary">{{ post.excerpt }}</p>
                    <small class="mt-1 text-muted">
                        <span>
                            <a class="text-decoration-none font-weight-bold text-secondary" href="{% url 'blog:user_posts' username=post.user.username %}">{{ post.user.username }}</a>
                        发布于 <time datetime="{{ post.date_created | date:'Y-m-d' }}">{{ post.date_created | date:'Y-m-d' }}</time>
                            <a class="text-decoration-none text-secondary" href="{{ post.get_absolute_url }}">阅读({{ post.num_views }})</a>
                            <a class="text-decoration-none text-secondary" href="{{ post.get_absolute_url }}#comments">评论({{ post.num_comments }})</a>
                        </span>
                    </small>
                </div>
            </div>
            <hr>
            {% endfor %}

        </div>
        <div class="col-md-4">
            {% include 'blog/_sidebar.html' %}
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <!--pagination-->
            {% if is_paginated %}
            <ul class="pagination">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="text-dark page-link" href="?page=1">首页</a>
                </li>
                <li class="page-item">
                    <a class="text-dark page-link" href="?page={{ page_obj.previous_page_number }}">&laquo;</a>
                </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active">
                    <a class="text-white page-link" href="?page={{ num }}">{{ num }}</a>
                </li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="text-dark page-link" href="?page={{ num }}">{{ num }}</a>
                </li>
                {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="text-dark page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a>
                </li>
                <li class="page-item">
                    <a class="text-dark page-link" href="?page={{ page_obj.paginator.num_pages }}">尾页</a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

